@mixin input-fixed-height {
	height: $input-height;
	line-height: 1;
}

// All input types

button,
input,
select,
textarea {
	padding: (0.75 * $spacing-abs-medium) $spacing-abs-medium;
	color: inherit;
	font: inherit;
	text-align: left;
	background: none;
	border: 0;
	outline: none;
}

// Button

.button {
	@include input-fixed-height;
	@include background-color("background-input");
	@include box-shadow($shadow-size-outer, "shadow-outer");
	border-radius: $border-radius-button;
	transition: $transition;

	&:not(.button-invisible):hover {
		@include background-color("background-input-hover");
	}

	&.button-main {
		@include color("text-button");

		&:not([disabled]) {
			@include background-color("main");

			&:hover {
				@include background-color("main-hover");
			}
		}

		&:disabled {
			@include background-color("background-button-disabled");
			box-shadow: none;
		}
	}

	&.button-invisible {
		width: $input-height;
		height: $input-height;
		padding: 0;
		line-height: 0;
		text-align: center;
		background: none;
		border-radius: 0;
		box-shadow: none;

		&:not([disabled]):hover {
			@include color("text-faded");
		}

		&.button-active {
			@include color("main");

			&:hover {
				@include color("main-hover");
			}
		}
	}

	&:disabled {
		@include color("text-disabled");
	}
}

// Text input

input:not([type="checkbox"]):not([type="radio"]) {
	@include input-fixed-height;
	@include background-color("background-input");
	@include box-shadow($shadow-size-inner, "shadow-inner");
	width: $input-width;
	border-radius: $border-radius-input;

	// Date input: Hide arrow button which displays Chrome's date picker popup
	&[type="date"]::-webkit-calendar-picker-indicator {
		display: none;
	}

	// Search input: Hide "cancel" button (replaced with a custom icon)
	&[type="search"]::-webkit-search-cancel-button {
		display: none;
	}
}

// Checkbox & radio button

input[type="checkbox"],
input[type="radio"] {
	margin-right: 8px;
	vertical-align: 0.1em; // Align vertically with label
}
